import Component from "../../Component.js";
import Type from "../../../experience/db/Type.js";
import {LayerType} from "../../../experience/db/Type.js";

const Cluster = ol.source.Cluster
const VectorSource = ol.source.Vector;
const VectorLayer = ol.layer.Vector;
const Stroke = ol.style.Stroke;
const Text = ol.style.Text;
const Fill = ol.style.Fill;
const Style = ol.style.Style;
const CircleStyle = ol.style.Circle;

export default class MapControlinit extends Component {
    constructor() {
        super();

    }

    // 初始化鹰眼视图
    init_overview_map() {
        // 初始化鹰眼视图
        const lineLayer = this.drawer.source(Type.Line);
        const lwpolylineLayer = this.drawer.source(Type.LWPolyline);
        const polylineLayer = this.drawer.source(Type.Polyline);

        const lineFeatures = lineLayer.getFeatures();
        const lwpolylineFeatures = lwpolylineLayer.getFeatures();
        const polylineFeatures = polylineLayer.getFeatures();

        const features = [...lineFeatures, ...lwpolylineFeatures, ...polylineFeatures];
        const smallLayer = this.drawer.drawer.SmallLayer;
        const smallLayerSource = smallLayer.getSource();
        for (let i = 0; i < features.length; i++) {
            smallLayerSource.addFeature(features[i]);
        }
        const overviewMapControl = new ol.control.OverviewMap({
            className: 'ol-overviewmap custom-overviewmap',
            layers: [smallLayer],
            tipLabel: '鹰眼地图'
        });
        this.drawer.map.addControl(overviewMapControl);
    }

    // 重置视角
    init_resetview() {
        const lineLayer = this.drawer.source(Type.Line);
        const ZoomControl = new ol.control.ZoomToExtent({
            className: 'custom-zoom-extent',
            extent: lineLayer.bounds,
            label: (function () {
                // 使用 Font-Awesome 的字符
                let span = document.createElement('span');
                span.className = 'fa fa-sync';
                return span;
            })(),
            tipLabel: '重置视图'
        });

        this.drawer.map.addControl(ZoomControl);
    }

    // 初始化聚合图层
    initCluster() {
        const gasFeatures = this.drawer.source(LayerType.SMGas).getFeatures();
        const broadcastFeatures = this.drawer.source(LayerType.SMBroadCast).getFeatures();
        const videoFeatures = this.drawer.source(LayerType.SMVideo).getFeatures();
        const source = new VectorSource({
            features: [
                ...gasFeatures,
                ...broadcastFeatures,
                ...videoFeatures
            ],
        });

        const clusterSource = new Cluster({
            distance: 150,
            minDistance: 100,
            source: source,
        });

        // 生成聚合图层
        const styleCache = {};
        const clusters = new VectorLayer({
            source: clusterSource,
            style: function (feature) {
                const size = feature.get('features').length;
                let style = styleCache[size];
                if (!style) {
                    style = new Style({
                        image: new CircleStyle({
                            radius: 10,
                            stroke: new Stroke({
                                color: '#fff',
                            }),
                            fill: new Fill({
                                color: '#3399CC',
                            }),
                        }),
                        text: new Text({
                            text: size.toString(),
                            fill: new Fill({
                                color: '#fff',
                            }),
                        }),
                    });
                    styleCache[size] = style;
                }
                return style;
            },
        });

        // 将生成的 cluster图层存储起来
        this.drawer.map.removeLayer(this.drawer.drawer.SMCluster);
        this.drawer.drawer.SMCluster = clusters;

        // 初始化创建 cluster的时候应该先直接隐藏他
        this.drawer.map.addLayer(this.drawer.drawer.SMCluster);

        // 判断传感器图层
        const gasLayerIsShow = this.drawer.drawer.SMGas.getVisible();
        if (gasLayerIsShow) {
            this.drawer.drawer.SMCluster.setVisible(false);
        } else {
            this.drawer.drawer.SMCluster.setVisible(true);
        }
    }

    // 监听gis上 zoom的变化
    watch_gis_zoom() {
        const map = this.drawer.map
        map.lastZoom = map.lastZoom || map.getView().getZoom()
        map.on('moveend',() => {
            const currentZoom = map.getView().getZoom()
            const editStatus = this.utils.getUrlParamer('edit')
            const ventilateStatus = this.utils.getUrlParamer('ventilate')
            if(currentZoom != map.lastZoom) {
                // if(editStatus == 'true' || ventilateStatus == 'true') {
                //     if(currentZoom > 9 ) {
                //         // 开启 通风系统的显示开关
                //         this.emitter.emit('open-ventilate')
                //     }
                //     else {
                //         // 关闭 通风系统的显示开关
                //         this.emitter.emit('close-ventilate')
                //     }
                // }
                if(currentZoom < 7) {
                    // 开启聚合图层，并隐藏其他安全监控元素图层
                    this.drawer.drawer.SMGas.setVisible(false)
                    this.drawer.drawer.SMVideo.setVisible(false)
                    this.drawer.drawer.SMBroadCast.setVisible(false)
                    this.drawer.drawer.SMCluster.setVisible(true)
                }
                else {
                    // 关闭聚合图层,并开启其他安全监控元素图层
                    this.drawer.drawer.SMGas.setVisible(true)
                    this.drawer.drawer.SMVideo.setVisible(true)
                    this.drawer.drawer.SMBroadCast.setVisible(true)
                    this.drawer.drawer.SMCluster.setVisible(false)
                }
                map.lastZoom = currentZoom

            }
        })
    }

    template() {
    }

    control() {
        this.init_overview_map();
        this.init_resetview();
        this.initCluster();
        this.watch_gis_zoom();
    }
}